<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基础</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
        <my-component2></my-component2>
        <my-counter></my-counter>
        <table border="1">
            <tr><td>单元格</td></tr>
            <tr is="my-row"></tr>
        </table>
    </div>
    <script>
        //全局注册
        Vue.component("my-component", {
            template : "<div>my is component</div>"
        });

        Vue.component("my-counter", {
            template : '<button v-on:click="counter += 1">{{counter}}</button>',
            //组件中的data必须以函数的形式存在
            data : function () {
                return { counter: 0 };
            }
        })
        new Vue({
            el : "#app",

            //局部注册
            components : {
                'my-component2' : {template:"<div>my is component2</div>"},
                'my-row' : {template : '<tr><td>使用注册组件要注意一些特殊html标签</td></tr>'}
            }
        })
    </script>
</body>
</html>